<template>
	<div class="send-message-wrap">
		<div class="send-message-header">
			<div class="send-message-title">
				<el-icon><Message /></el-icon>
				发送通知
			</div>
			<el-icon class="close-icon" @click="closeDialog"><Close /></el-icon>
		</div>

		<div class="send-message-content">
			<div class="form-item">
				<div class="label">推送至：</div>
				<div class="select-box">
					<span>{{ getMsgTypeName(messageForm.type) }}</span>
					<img src="@/assets/images/global/arrow-down.png" alt="" class="arrow-down" />
					<el-select v-model="messageForm.type" placeholder="列车到达通知" :teleported="false" class="message-select">
						<el-option v-for="item in noticeTypeOptions" :key="item.value" :label="item.label" :value="item.value" />
					</el-select>
				</div>
			</div>

			<div class="form-item">
				<div class="label">内 容：</div>
				<el-input
					v-model="messageForm.content"
					type="textarea"
					:rows="6"
					class="message-textarea"
					placeholder="请输入通知内容"
				/>
			</div>
		</div>

		<div class="send-message-footer">
			<el-button type="primary" class="send-btn" @click="sendMessage">发送通知</el-button>
		</div>
	</div>
</template>

<script lang="ts" setup>
	import { ref, reactive } from 'vue'
	import { ElMessage } from 'element-plus'
	import { Message, Close } from '@element-plus/icons-vue'
	import { addMessage } from '@/api/train'
	interface MessageForm {
		type: any
		content: string
	}

	interface NoticeTypeOption {
		label: any
		value: any
	}

	// 通知类型选项
	const noticeTypeOptions = reactive<NoticeTypeOption[]>([
		{ label: '列车到达通知', value: 1 },
		{ label: '列车延误通知', value: 2 },
		{ label: '紧急通知', value: 3 },
		{ label: '设备维护通知', value: 4 },
		{ label: '人员调度通知', value: 5 },
	])

	// 定义props和emits
	const props = defineProps({
		visible: {
			type: Boolean,
			default: false,
		},
	})

	const getMsgTypeName = (typeId: number) => {
		const targetItem: any = noticeTypeOptions.find((notItem: any) => notItem.value === typeId)
		return targetItem.label;
	}

	const emit = defineEmits(['close', 'send'])

	// 表单数据
	const messageForm = reactive<MessageForm>({
		type: 1,
		content: '',
	})

	// 关闭对话框
	const closeDialog = () => {
		emit('close')
	}

	// 发送消息
	const sendMessage = async () => {
		if (!messageForm.content.trim()) {
			ElMessage.warning('请输入通知内容')
			return
		}
		// let formData = new FormData();
		// formData.append("createUserAccount", "user");
		// formData.append("msgType", messageForm.type);
		// formData.append("msg", messageForm.content);
		// formData.append("theme", "theme");
		// formData.append("notifyGroup", "notifyGroup");
		await addMessage({
			"createUserAccount": "user",
			"msgType": messageForm.type,
			"msg": messageForm.content,
			"theme": "theme",
			"notifyGroup": "notifyGroup"
		}).then((sendRes: any) => {
			console.log(sendRes);
			ElMessage.success('发送成功！')
		})
		// emit('send', {
		// 	type: messageForm.type,
		// 	content: messageForm.content,
		// 	typeName: noticeTypeOptions.find((item: any) => item.value === messageForm.type)?.label || '',
		// })

		// 发送成功后清空表单
		messageForm.content = ''

		// 关闭对话框
		closeDialog()
	}
</script>

<style lang="scss" scoped>
	.send-message-wrap {
		width: 879px;
		background-color: #0a1633;
		border: 1px solid #1d3b65;
		border-radius: 8px;
		color: #fff;
		display: flex;
		flex-direction: column;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		z-index: 9999;
		font-size: 32px;

		.send-message-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 0 20px;
			border-bottom: 1px solid #1d3b65;
			height: 70px;
			background: linear-gradient(to right, rgba(2, 171, 255, 0.6), rgba(5, 63, 113, 0));

			.send-message-title {
				display: flex;
				align-items: center;
				font-size: 32px;

				.el-icon {
					margin-right: 10px;
					color: #409eff;
					font-size: 32px;
				}
			}

			.close-icon {
				cursor: pointer;
				font-size: 32px;

				&:hover {
					color: #409eff;
				}
			}
		}

		.send-message-content {
			padding: 30px;
			flex: 1;
			display: flex;
			flex-direction: column;

			.form-item {
				display: flex;
				margin-bottom: 30px;
				align-items: flex-start;

				&:last-child {
					flex: 1;
					display: flex;

					.message-textarea {
						flex: 1;
						height: 100%;
					}
				}

				.label {
					width: 150px;
					text-align: right;
					padding-right: 20px;
					line-height: 50px;
					font-size: 32px;
					white-space: nowrap;
				}
				.select-box {
					width: 100%;
					flex: 1;
					background-color: rgba(2, 171, 255, 0.1);
					border: 1px solid #1d3b65;
					height: 50px;
					position: relative;
					span {
						position: absolute;
						top: 50%;
						transform: translateY(-50%);
						left: 20px;
					}
				}
				.message-select {
					width: 100%;
					flex: 1;
					:deep(.el-select__wrapper) {
						opacity: 0;
					}
					:deep(.el-input__wrapper) {
						background-color: rgba(2, 171, 255, 0.1);
						border: 1px solid #1d3b65;
						box-shadow: none;
						height: 50px;
					}

					:deep(.el-input__inner) {
						color: #fff;
						font-size: 32px;
					}
				}

				.message-textarea {
					flex: 1;
					width: 100%;

					:deep(.el-textarea__inner) {
						background-color: rgba(2, 171, 255, 0.1);
						border: 1px solid #1d3b65;
						color: #fff;
						resize: none;
						box-shadow: none;
						font-size: 32px;
						line-height: 1.6;
						height: 100%;

						&:focus {
							border-color: #409eff;
						}
					}
				}
			}
		}

		.send-message-footer {
			display: flex;
			justify-content: flex-end;
			padding: 0 30px 30px;

			.send-btn {
				background: linear-gradient(180deg, rgba(5, 86, 113, 1) 0%, rgba(24, 141, 174, 1) 100%);
				border: none;
				padding: 12px 30px;
				font-size: 32px;
				border-radius: 10px;
				width: 216px;
				height: 79px;
				&:hover {
					opacity: 0.9;
				}

				&:active {
					transform: scale(0.98);
				}
			}
		}
	}
	.arrow-down {
		width: 44px;
		height: 28px;
		position: absolute;
		transform: translateY(-50%);
		right: 10px;
		top: 50%;
	}
	:deep(.el-popper__arrow) {
		display: none;
	}
	// 覆盖Element Plus下拉菜单样式
	:deep(.el-select__popper) {
		background-color: #0a1633 !important;
		border: 1px solid #1d3b65 !important;

		.el-select-dropdown__item {
			color: #fff;
			font-size: 32px;
			height: 50px;
			line-height: 50px;
			background-color: transparent !important;
			&:hover {
				background-color: rgba(2, 171, 255, 0.3) !important;
			}
		}
	}
</style>
